<!--  -->
<template>
  <div class='record-item'>
    <div class="tag">{{index + 1}}</div>
    <div class="record-wrap">
      <div class="record-head flex-j-sb flex-a-c">
        <div class="member flex-a-c ">
          <van-image
            width="22px"
            height="22px"
            round
            :src="itemObj.member && itemObj.member.avatar_image"
            />
          <h3>{{itemObj.member && itemObj.member.nickname}}</h3>
          <span v-if="itemObj.check_in_type == 1 && itemObj.status == 1">{{itemObj.created_at}}</span>
        </div>
        <slot name="top"></slot>
      </div>
      <div class="record-content">
        <h3>{{itemObj.detail}}</h3>
        <div class="flex record-img">
          <blcok v-for="(imgItem,imgIndex) in itemObj.image_list" :key="imgIndex">
            <van-image
              width="96px"
              height="96px"
              radius="8px"
              :src="imgItem"
              @click="preview(itemObj.image_list,imgIndex)"
            />
          </blcok>
        </div>
        <slot name="footer"></slot>
        
      </div>
    </div>
    <img :src="`${imgPath}check-in-rebate/clockError.png`" class="clock-error" v-if="itemObj.check_in_type == 2 && itemObj.status == 2" />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { ImagePreview } from "vant";
import { Image as VanImage } from "vant";
export default {
name:'',
//import引入的组件需要注入到对象中才能使用
components: {
  VanImage
},
props:{
  itemObj:{
    type:Object,
    default:() => {
      return {}
    }
  },
  imgPath:String,
  index:{
    type:Number,
    default:0
  },
},
data() {
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  preview(imgArr,index) {
    ImagePreview({images:imgArr,startPosition: index})
  },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .record-item {
    position: relative;
    background-color: #fff;
    padding:0.875rem 0.625rem;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin:0 0 0.625rem 0;
    .clock-error {
      position: absolute;
      width: 3.75rem;
      height: auto;
      display: block;
      right:0.75rem;
      top:0.75rem;
    }
    .tag {
      background: #F0F0F1;
      border-radius: 0.5rem 0rem 0.5rem 0rem;
      font-weight: 500;
      font-size: 0.875rem;
      color: #808080;
      padding:0.25rem 0.5rem;
      position: absolute;
      left:0.125rem;
      top:0.125rem;
    }
    .record-wrap {
      padding:0 0 0 1.375rem;
      .record-head {
        .member {
          h3 {
            font-size: 0.8125rem;
            color: #00001C;
            padding:0 0.375rem;
          }
          span {
            font-size: 0.75rem;
            color: #999999;
          }
        }
        .member-btn {
          padding:0.1875rem 0.25rem;
          font-size: 0.6875rem;
          line-height: 0.6875rem;
          color: #3B3B4A;
          border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
          border: 0.0625rem solid #AAAAB3;
          &:nth-child(1) {
            margin:0 0.25rem 0 0;
          }
        }
      }
      .record-content {
        padding:0.875rem 0 0 0;
        text-align: left;
        h3 {
          font-weight: 500;
          font-size: 0.9375rem;
          color: #00001C;
          padding:0 0 0.625rem 0;
        }
        .record-img{
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          column-gap: 0.5rem;
          row-gap: 0.5rem;
          // padding-bottom: 8px;
        }
      }
      .record-footer {
        padding:1.125rem 0 0 0;
        .footer-box {
          flex:1;
          font-size: 0.8125rem;
          color: #808080;
          .iconfont {
            padding:0  0.3125rem 0 0 ;
          }
        }
        .on {
          color: var(--themeBaseColor);
        }
      }
    }
  }
</style>